<%@ page language="java" isELIgnored="false" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>单航线抓取历史统计——恒拓运价魔方</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/fare/js/show.js"></script>
<link href="<%=request.getContextPath()%>/fare/css/base.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/fare/js/jquery-1.6.4.min.js"></script>
<link rev="stylesheet" media="all" href="<%=request.getContextPath() %>/fare/css/form_style.css" type="text/css" rel="stylesheet">
<link href="<%=request.getContextPath() %>/fare/css/base.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=request.getContextPath() %>/fare/js/datePicker/WdatePicker.js"></script>
<script	src="<%=request.getContextPath()%>/fare/lib/jquery/jquery.form.js"	type="text/javascript"></script>
<script type="text/javascript"	src="<%=request.getContextPath() %>/FusionCharts/FusionCharts.js"></script>
<!-- 圆角文本框 -->
<link href="<%=request.getContextPath() %>/fare/css/htc/htc.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath() %>/fare/css/bt_class.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
<style type="text/css">
.tooltips{
text-decoration:none;
position:relative;
z-index:2;
}
.tooltips:hover{
z-index:3;
background:none;
}
.tooltips span{
display: none;
}
.tooltips:hover span{
z-index:99999;
display:block;
position:absolute;  
margin:-20px -10px 0px -25px; border:0;
clear:both;
overflow:hidden;
margin:0;
padding:0;
border:1px solid black;
background-color:#DCDCDC;
padding:3px;
color:black;
}
.dateTd{
text-align:left;
width:1000px; 
height:30px;
border-right:1px solid #999d9c;
border-left:1px solid #999d9c;
border-top:1px solid #999d9c;
font-size:16px;
font-family:黑体;
}
</style>	
</style>
<script type="text/javascript">
$(function(){
	var chartXml=${ja};
	setChart(chartXml[0].xml);
	
	if($("#grabDate_1").val()=="" ){
		$("#grabDate_1").val('${grabDate_1}');
	}
	if($("#grabDate_2").val() ==""){
		$("#grabDate_2").val('${grabDate_2}');
	}
	
});

function get_lastDate(ymd,ym,n){  
    ymd=ymd?new Date(ymd.replace(/-/g,"/")):new Date();  
    ym&&(ym=="y"?ymd.setFullYear(ymd.getFullYear()-1):ymd.setMonth(ymd.getMonth()-1));  
    n&&ymd.setDate(ymd.getDate()+n);  
    return ymd.toLocaleDateString().match(/\d+/g).join('-');  
}  

function find(){
	var grabDate_1=$("#grabDate_1").val();
	var grabDate_2=$("#grabDate_2").val();
	if(Date.parse(grabDate_1)> Date.parse(grabDate_2)){
		alert("查询日期范围不对!");
		return ;
	}
	
	$("#grabDateForm").attr("action","<%=request.getContextPath()%>/crawlInfoAction!findHistoryData.action?grabDate_1="+grabDate_1+"&grabDate_2="+grabDate_2);
	$("#grabDateForm").submit();
	
}
function clearAll(){
	$("#grabDate_1").val("");
	$("#grabDate_2").val("");
}



//js分页
//el:分页容器 count:总记录数 pageStep:每页显示多少个 pageNum:第几页 fnGo:分页跳转函数
var jsPage = function(el, count, pageStep, pageNum, fnGo) {
	this.getLink = function(fnGo, index, pageNum, text) {
		var s = '<a href="#p' + index + '" onclick="' + fnGo + '(' + index + ');" ';
		if(index == pageNum) {
			s += 'class="aCur" ';
		}
		text = text || index;
		s += '>' + text + '</a> ';
		return s;
	}
	
	//总页数
	var pageNumAll = Math.ceil(count / pageStep);
	if (pageNumAll == 1) {
		divPage.innerHTML = '';
		return;
	}
	var itemNum = 5; //当前页左右两边显示个数
	pageNum = Math.max(pageNum, 1);
	pageNum = Math.min(pageNum, pageNumAll);
	var s = '';
	if (pageNum > 1) {
		s += this.getLink(fnGo, pageNum-1, pageNum, '上一页');
	} else {
		s += '<span>上一页</span> ';
	}
	var begin = 1;
	if (pageNum - itemNum > 1) {
		s += this.getLink(fnGo, 1, pageNum) + '... ';
		begin = pageNum - itemNum;
	}
	var end = Math.min(pageNumAll, begin + itemNum*2);
	if(end == pageNumAll - 1){
		end = pageNumAll;
	}
	for (var i = begin; i <= end; i++) {
		s += this.getLink(fnGo, i, pageNum);
	}
	if (end < pageNumAll) {
		s += '... ' + this.getLink(fnGo, pageNumAll, pageNum);
	}
	if (pageNum < pageNumAll) {
		s += this.getLink(fnGo, pageNum+1, pageNum, '下一页');
	} else {
		s += '<span>下一页</span> ';
	}
	var divPage = document.getElementById(el);
	divPage.innerHTML = s;
}


</script>
</head>

<body>
	<div class="form_body">
		<div class="main_max">
			<div class="form_table_tltle" style="height:40px;background-color:#F0F0F0" >
				<table  width="0" border="0" cellspacing="0" cellpadding="0" margin="1"  >
					<tr border-spacing="12">
					<td align="left" height="5px" style="font-size:18px" width="300px" >${depCityName}(${depCity})——${arrCityName }(${arrCity})</td>
					<td width="300px"></td>
					<td align="" height="50px" style="font-size:16px"><font color="#808080">总数据量：${totalSourceSizes }M</font></td>
					</tr>
					
				</table>
			</div>
						
			<div class="high_10"></div>
			<form id="grabDateForm">
				<table  width="0" border="0" cellspacing="0" cellpadding="0" margin="1"   >
				<input type="hidden" name="depCity" id="depCity" value="${depCity }"/>
				<input type="hidden" name="arrCity" id="arrCity" value="${arrCity }"/>
					<tr class="dateTd">
						<td class="left" style="width:1000px;height:40px">&nbsp;日期：&nbsp;&nbsp;
							<input name="grabDate_1" type="text"	id="grabDate_1" style="width: 129px"    
							onClick="WdatePicker({dateFmt:'yyyy-MM-dd',lang:'<s:text name='forms.locale'/>'})" readonly="readonly"/>
							&nbsp;至&nbsp;
							<input name="grabDate_2" type="text"	id="grabDate_2" style="width: 129px"    
							onClick="WdatePicker({dateFmt:'yyyy-MM-dd',lang:'<s:text name='forms.locale'/>'})" readonly="readonly"/>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<a href="#" name=""  class="css_btn_class"  onclick="find()" style="margin-left:1px"/>查询
						<a href="#" name=""  class="css_btn_class"  onclick="clearAll()" style="margin-left:12px"/>清空
						</td>
					</tr>
					
				</table>
			</form>	
			<form action="" id="page_form">
				
			<table width="0" border="0" cellspacing="0" cellpadding="0" class="form_list">
				<tr class="title">
					<td style="text-align: center">序号</td>
					<td style="text-align: center">日期</td>
					<td style="text-align: center">数据量</td>
				</tr>
				<tbody id="table2">
				<c:forEach items="${totalList}" var="vo" varStatus="status">
				<tr >
					<td class="line" style="text-align: center">${status.index+1}</td>
					<td class="line" style="text-align: center">${vo.grabdate}</td>
					<td class="line" style="text-align: center"><fmt:formatNumber type="number" maxFractionDigits="0" value="${vo.sourceDataSize/(1024*1024)}" />M </td>
				</tr>
				</c:forEach>
				</tbody>
			</table>
			<span id="spanFirst" style="position:absolute;overflow:auto;cursor:default;left:800px">第一页</span> 
			<span id="spanPre" style="position:absolute;overflow:auto;cursor:default;left:845px">上一页</span> 
			<span id="spanNext" style="position:absolute;overflow:auto;cursor:default;left:890px">下一页</span> 
			<span id="spanLast" style="float:right;font-size:12px;">最后一页</span> 
			<span style="position:absolute;overflow:auto;cursor:default;left:695px">第</span> 
			<span id="spanPageNum" style="position:absolute;overflow:auto;cursor:default;left:715px" ></span>
			<span style="position:absolute;overflow:auto;cursor:default;left:730px">页/共</span>
			<span id="spanTotalPage" style="position:absolute;overflow:auto;cursor:default;left:760px" ></span>
			<span style="position:absolute;overflow:auto;cursor:default;left:780px">页</span>
		</form>
		
		</div>
		
	</div>
	
	<div class="high_10"></div>
	<!-- <div id="bar_chart" align="center" style="width: 400;display:block;padding-top: 0px;"></div> -->
	<div id="bar_chart" ></div>

	
</body>
</html>
<script language="JavaScript">
function setChart(xml) {
	var width = '990';
	//ScrollStackedColumn2D滚动显示
	var chart2 = new FusionCharts("<%=request.getContextPath()%>/FusionCharts/MSLine.swf", "chart1Id", width, "350");
	chart2.setDataXML(xml);
	chart2.setTransparent(true);
//	chart2.addParam("wmode","Opaque"); 
	chart2.render("bar_chart");	
}
</script>
<script>

/* //分页style */
var theTable = document.getElementById("table2");
var totalPage = document.getElementById("spanTotalPage");
var pageNum = document.getElementById("spanPageNum");
var spanPre = document.getElementById("spanPre");
var spanNext = document.getElementById("spanNext");
var spanFirst = document.getElementById("spanFirst");
var spanLast = document.getElementById("spanLast");
var numberRowsInTable = theTable.rows.length;
var pageSize = 10;
var page = 1;

//下一页
function next() {
    hideTable();
    currentRow = pageSize * page;
    maxRow = currentRow + pageSize;
    if (maxRow > numberRowsInTable) maxRow = numberRowsInTable;
    for (var i = currentRow; i < maxRow; i++) {
        theTable.rows[i].style.display = '';
    }
    page++;
    if (maxRow == numberRowsInTable) { nextText(); lastText(); }
    showPage();
    preLink();
    firstLink();
}
//上一页
function pre() {
    hideTable();
    page--;
    currentRow = pageSize * page;
    maxRow = currentRow - pageSize;
    if (currentRow > numberRowsInTable) currentRow = numberRowsInTable;
    for (var i = maxRow; i < currentRow; i++) {
        theTable.rows[i].style.display = '';
    }

    if (maxRow == 0) { preText(); firstText(); }
    showPage();
    nextLink();
    lastLink();
}
//第一页
function first() {
    hideTable();
    page = 1;
    for (var i = 0; i < pageSize; i++) {
        theTable.rows[i].style.display = '';
    }
    showPage();
    preText();
    nextLink();
    lastLink();
}
//最后一页
function last() {
    hideTable();
    page = pageCount();
    currentRow = pageSize * (page - 1);
    for (var i = currentRow; i < numberRowsInTable; i++) {
        theTable.rows[i].style.display = '';
    }
    showPage();
    preLink();
    nextText();
    firstLink();
}

function hideTable() {
    for (var i = 0; i < numberRowsInTable; i++) {
        theTable.rows[i].style.display = 'none';
    }
}
function showPage() {
    pageNum.innerHTML = page;
}
//总共页数
function pageCount() {
    var count = 0;
    if (numberRowsInTable % pageSize != 0) count = 1;
    return parseInt(numberRowsInTable / pageSize) + count;
}
//显示链接
function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>"; }
function preText() { spanPre.innerHTML = "上一页"; }
function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; }
function nextText() { spanNext.innerHTML = "下一页"; }
function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; }
function firstText() { spanFirst.innerHTML = "第一页"; }
function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; }
function lastText() { spanLast.innerHTML = "最后一页"; }
//隐藏表格
function hide() {
    for (var i = pageSize; i < numberRowsInTable; i++) {
        theTable.rows[i].style.display = 'none';
    }
    totalPage.innerHTML = pageCount();
    pageNum.innerHTML = '1';
    nextLink();
    lastLink();
}
hide();

</script>
